<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>性能指标 - 智感桥安</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <h2>智感桥安</h2>
                <span>道路光纤监测系统</span>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="index.html" class="nav-link">首页</a>
                </li>
                <li class="nav-item">
                    <a href="diagram.html" class="nav-link">系统示意图</a>
                </li>
                <li class="nav-item active">
                    <a href="metrics.html" class="nav-link">性能指标</a>
                </li>
                <li class="nav-item">
                    <a href="control.html" class="nav-link">控制面板</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <h1>系统性能指标</h1>
            <p class="section-description">实时监测光纤系统的各项性能指标与运行状态</p>
            
            <div class="metrics-controls">
                <button id="refresh-metrics" class="btn btn-primary">刷新数据</button>
                <button id="auto-refresh" class="btn btn-secondary">自动刷新: <span id="auto-refresh-status">关</span></button>
            </div>
            
            <div class="metrics-grid">
                <!-- 系统总体指标 -->
                <div class="metric-card full-width">
                    <h3>系统总体指标</h3>
                    <div class="metric-content">
                        <div class="metric-item">
                            <span class="metric-label">系统运行时间</span>
                            <span class="metric-value" id="uptime">--</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">数据采集完整率</span>
                            <span class="metric-value" id="data-completeness">--</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">系统可用性</span>
                            <span class="metric-value" id="availability">--</span>
                        </div>
                    </div>
                </div>
                
                <!-- 数据传输指标 -->
                <div class="metric-card">
                    <h3>数据传输指标</h3>
                    <div class="metric-content">
                        <div class="metric-item">
                            <span class="metric-label">平均传输速率</span>
                            <span class="metric-value" id="transfer-rate">--</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">数据延迟</span>
                            <span class="metric-value" id="data-latency">--</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">丢包率</span>
                            <span class="metric-value" id="packet-loss">--</span>
                        </div>
                    </div>
                </div>
                
                <!-- AI分析指标 -->
                <div class="metric-card">
                    <h3>AI分析指标</h3>
                    <div class="metric-content">
                        <div class="metric-item">
                            <span class="metric-label">诊断准确率</span>
                            <span class="metric-value" id="accuracy">--</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">预警响应时间</span>
                            <span class="metric-value" id="response-time">--</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">模型更新频率</span>
                            <span class="metric-value" id="model-update">--</span>
                        </div>
                    </div>
                </div>
                
                <!-- 传感器网络指标 -->
                <div class="metric-card">
                    <h3>传感器网络指标</h3>
                    <div class="metric-content">
                        <div class="metric-item">
                            <span class="metric-label">在线传感器数量</span>
                            <span class="metric-value" id="online-sensors">--</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">传感器平均寿命</span>
                            <span class="metric-value" id="sensor-lifetime">--</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">故障率</span>
                            <span class="metric-value" id="failure-rate">--</span>
                        </div>
                    </div>
                </div>
                
                <!-- 实时监测图表 -->
                <div class="metric-card full-width">
                    <h3>实时数据趋势</h3>
                    <div class="metric-content">
                        <canvas id="metrics-chart" width="800" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 长安大学 - 智感桥安项目组. 版权所有.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="scripts.js"></script>
</body>
</html>